<template>
  <div>
    <searchHead :flag="true" :pageFlag="3" @instructSearch="instructSearch"></searchHead>
    <div style="margin:10px 0 0 0">
      <template>
        <el-table max-height="500" :data="tableData" align="center" style="width: 100%">
          <el-table-column align="center" prop="deviceName" label="设备名称">
          </el-table-column>
          <el-table-column align="center"label="控制方式">
            <template slot-scope="scope">
              {{scope.row.userName == null ? "自动":"手动"}}控制
            </template>
          </el-table-column>
          <el-table-column align="center" prop="userName" label="用户名称">
          </el-table-column>
          <el-table-column align="center" prop="instructName" label="控制项">
          </el-table-column>
          <el-table-column align="center" label="控制结果">
            <template slot-scope="scope">
              {{scope.row.result == 0 ? "成功":"失败"}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="控制时间">
          </el-table-column>

        </el-table>
      </template>
    </div>
    <div style="text-align:center;margin:20px 0 0 0 ">
      <!-- <el-switch v-model="pages"> </el-switch> -->
      <el-pagination
        :hide-on-single-page="pages"
        :total="total"
        :page-size="20"
        layout="prev, pager, next"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import searchHead from '../../components/searchHead/searchHead'
  import axios from 'axios'

  export default {
    data () {
      return {
        isSearch: false,
        pages: '',
        total: 10,
        pageNum: 1,
        tableData: [
          {
            name: '空调一',
            controllWay: '手动控制',
            controllRouce: '管理员',
            controllItem: '高风制冷22度',
            controllResult: '控制成功',
            controllTime: '2019.10.14 12:22',

          },
          {
            name: '空调一',
            controllWay: '手动控制',
            controllRouce: '管理员',
            controllItem: '高风制冷22度',
            controllResult: '控制成功',
            controllTime: '2019.10.14 12:22',

          },
          {
            name: '空调一',
            controllWay: '手动控制',
            controllRouce: '管理员',
            controllItem: '高风制冷22度',
            controllResult: '控制成功',
            controllTime: '2019.10.14 12:22',

          },
          {
            name: '空调一',
            controllWay: '手动控制',
            controllRouce: '管理员',
            controllItem: '高风制冷22度',
            controllResult: '控制成功',
            controllTime: '2019.10.14 12:22',

          },
          {
            name: '空调一',
            controllWay: '手动控制',
            controllRouce: '管理员',
            controllItem: '高风制冷22度',
            controllResult: '控制成功',
            controllTime: '2019.10.14 12:22',

          },
          {
            name: '空调一',
            controllWay: '手动控制',
            controllRouce: '管理员',
            controllItem: '高风制冷22度',
            controllResult: '控制成功',
            controllTime: '2019.10.14 12:22',

          },
          {
            name: '空调一',
            controllWay: '手动控制',
            controllRouce: '管理员',
            controllItem: '高风制冷22度',
            controllResult: '控制成功',
            controllTime: '2019.10.14 12:22',
          },
        ]
      }
    },
    methods: {
      changePage (el) {
        this.pageNum = el
        if (this.isSearch) {
          this.requestObj['pageNum'] = this.pageNum
          this.requestObj['pageSize'] = 20
          let param = {
            zoneId: this.requestObj.zoneId,
            buildingId: this.requestObj.buildingId,
            floor: this.requestObj.floor,
            room: this.requestObj.roomId,
            startTime: this.requestObj.startTime,
            endTime: this.requestObj.endTime,
            pageNum: this.requestObj.pageNum,
            pageSize: this.requestObj.pageSize
          }
          this.pubilcFnAxios('/instructLogs', param)
            .then(data => {
              console.log(data)
              this.total = data.total
              this.tableData = data.list
            })
            .catch(() => {
              console.log('失败')
            })
        } else {
          this.pubilcFnAxios('/instructLogs', {pageNum: this.pageNum, pageSize: 20})
            .then(data => {
              console.log(data)
              this.total = data.total
              this.tableData = data.list
            })
            .catch(() => {
              console.log('失败')
            })
        }
      },
      instructSearch (data) {
        console.log('历史指令搜索事件触发')
        this.isSearch = true
        if (data.endTime == '') {
          delete data.startTime
          delete data.endTime
        }
        this.requestObj = data
        this.pubilcFnAxios('/instructLogs', this.requestObj)
          .then(data => {
            this.total = data.total
            this.tableData = data.list
          })
      },
      getTableDate () {
        this.pubilcFnAxios('/instructLogs',{pageNum: 1, pageSize: 20})
          .then(data => {
            console.log(data)
            this.total = data.total
            this.tableData = data.list

          })
          .catch(() => {
            console.log('失败')
          })
      },

      pubilcFnAxios (urlString, params, method) {
        //公用axios数据请求
        return new Promise((resolve, reject) => {
          axios.get(this.api + urlString, {
            params: params,
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            withCredentials: true
          }).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject('get请求错误')
          })
        })
      },
    },
    components: {
      searchHead
    },
    mounted () {
      this.getTableDate()
    }
  }
</script>
